<template>
  <div class="bill-detail-container">
    <!-- 加载动画 -->
    <el-loading v-model="loading" fullscreen text="加载中..."></el-loading>

    <!-- 账单信息卡片 -->
    <el-card v-if="!loading" class="mb-20">
      <template #header>
        <span>账单信息</span>
      </template>
      <el-descriptions column="2" border>
        <!-- 账单编号 + 月度标签 -->
        <el-descriptions-item label="账单编号">
          {{ billInfo.billNo }}
          <el-tag class="custom-month-tag" style="margin-left: 8px;">
            {{ billInfo.billType }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="账单月份">{{ billInfo.billMonth }}</el-descriptions-item>

        <!-- 老人信息 -->
        <el-descriptions-item label="老人姓名">{{ billInfo.elderlyName }}</el-descriptions-item>
        <el-descriptions-item label="老人身份证号">{{ billInfo.elderlyIdCard }}</el-descriptions-item>

        <!-- 金额信息 -->
        <el-descriptions-item label="账单金额（元）">{{ (billInfo.billAmount ?? 0).toFixed(2) }}</el-descriptions-item>
<el-descriptions-item label="应付金额（元）">{{ (billInfo.payableAmount ?? 0).toFixed(2) }}</el-descriptions-item>

        <!-- 周期 & 天数 -->
        <!-- <el-descriptions-item label="账单周期">{{ billInfo.billPeriod }}</el-descriptions-item>
        <el-descriptions-item label="共计天数（天）">{{ billInfo.totalDays }}</el-descriptions-item> -->

        <!-- 状态 & 截止时间 -->
        <el-descriptions-item label="交易状态">
          <el-tag :type="getStatusTagType(billInfo.transactionStatus)">
            {{ billInfo.transactionStatus }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付截止时间">{{ billInfo.payDeadline }}</el-descriptions-item>

        <!-- 创建信息 -->
        <el-descriptions-item label="创建人">{{ billInfo.creator }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ billInfo.createTime }}</el-descriptions-item>
      </el-descriptions>                                             
    </el-card>

    <!-- 账单明细卡片 -->
    <el-card v-if="!loading" class="mb-20">
      <template #header>
        <span>账单明细</span>
      </template>
      
      <el-table :data="detailList" border header-align="center">
        <el-table-column label="类型" prop="type" width="100"></el-table-column>
        <el-table-column label="费用项目" prop="item"></el-table-column>
        <el-table-column label="服务内容" prop="content"></el-table-column>
        <el-table-column label="金额（元）" prop="amount" align="right">
          <template #default="scope">
            {{ (scope.row.amount ?? 0).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 返回按钮 -->
    <div v-if="!loading" class="operate-bar">
      <el-button type="primary" icon="el-icon-back" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'

// 路由 & 响应式数据
const route = useRoute()
const router = useRouter()
const loading = ref(true)        // 加载状态
const billInfo = ref({})         // 账单主信息
const detailList = ref([])       // 明细列表

// 状态标签颜色映射
const getStatusTagType = computed(() => (status) => {
  switch (status) {
    case '已支付': return 'success'
    case '待支付': return 'warning'
    case '已关闭': return 'info'
    default: return ''
  }
})

// 初始化：严格匹配设计图数据
onMounted(() => {
    console.log(route.query.billNo)
    // 调用后端接口获取账单详情
    request.get('/system/bill/detail', {
      params: { billNo: route.query.billNo }
    }).then(res => {
      billInfo.value = res.data
      loading.value = false
    }).catch(err => {
      console.error('获取账单详情失败:', err)
      loading.value = false
    })

  detailList.value = [
    { type: '添加项', item: '护理费用', content: '特级护理等级', amount: 2000.00 },
    { type: '添加项', item: '床位费用', content: '特护房', amount: 1700.00 },
    { type: '添加项', item: '其他费用', content: '其他', amount: 0.00 },
    { type: '小计', item: '', content: '', amount: 3700.00 },
    { type: '扣减项', item: '医保支付', content: '——', amount: 0.00 },
    { type: '扣减项', item: '政府补贴', content: '——', amount: 0.00 },
    { type: '小计', item: '', content: '', amount: 0.00 },
    { type: '每月应付', item: '', content: '', amount: 3700.00 },
    { type: '本期应付', item: '', content: '', amount: 2590.00 },
    { type: '押金', item: '', content: '', amount: 1000.00 },
    { type: '账单金额', item: '', content: '', amount: 3590.00 },
    { type: '预缴款支付', item: '', content: '', amount: -1000.00 },
    { type: '应付金额', item: '', content: '', amount: 2590.00 }
  ]

  loading.value = false
})

// 返回上一页
const handleBack = () => {
  router.back()
}
</script>

<style scoped lang="scss">
// 深色主题变量
$dark-bg: #1E1E1E;        // 卡片背景
$dark-border: #333;       // 边框颜色
$dark-text: #fff;         // 主文字颜色
$dark-light-text: #ccc;   // 辅助文字颜色

.bill-detail-container {
  background-color: #121212; // 页面背景（更暗）
  padding: 20px;

  .mb-20 {
    margin-bottom: 20px;
  }

  .operate-bar {
    margin-top: 20px;
    text-align: right;
  }

  // 卡片样式穿透
  ::v-deep .el-card {
    background-color: $dark-bg;
    border: 1px solid $dark-border;
    .el-card__header {
      color: $dark-text;
      border-bottom: 1px solid $dark-border;
    }
    .el-card__body {
      padding: 16px;
    }
  }

  // 描述列表样式穿透
  ::v-deep .el-descriptions {
    background-color: $dark-bg;
    border: 1px solid $dark-border;
    &::before, &::after {
      background-color: $dark-border;
    }
    .el-descriptions-item {
      border-right: 1px solid $dark-border;
      border-bottom: 1px solid $dark-border;
      &:nth-child(2n) {
        border-right: none;
      }
      .el-descriptions__label {
        color: $dark-light-text;
      }
      .el-descriptions__content {
        color: $dark-text;
      }
    }
  }

  // 表格样式穿透
  ::v-deep .el-table {
    background-color: $dark-bg;
    border: 1px solid $dark-border;
    .el-table__header th {
      background-color: #2C2C2C;
      color: $dark-text;
      border-bottom: 1px solid $dark-border;
    }
    .el-table__body tr {
      background-color: $dark-bg;
      color: $dark-text;
    }
    .el-table__body tr:hover {
      background-color: #2A2A2A;
    }
    .el-table__cell {
      border-bottom: 1px solid $dark-border;
      color: $dark-text;
    }
    &::before {
      background-color: $dark-border;
    }
  }

  // 自定义标签（月度账单）
  ::v-deep .custom-month-tag {
    background-color: #444 !important;
    border-color: #444 !important;
    color: $dark-text !important;
  }

  // 状态标签优化（已支付→绿色更明显）
  ::v-deep .el-tag--success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
  }

  // 按钮样式优化
  ::v-deep .el-button--primary {
    background-color: #409EFF !important;
    border-color: #409EFF !important;
    &:hover {
      background-color: #66b1ff !important;
      border-color: #66b1ff !important;
    }
  }
}

// 小屏幕适配
@media (max-width: 768px) {
  .bill-detail-container {
    padding: 10px;
  }
}
</style>